<template>
  <div class="word">
    <el-input v-model="user.name" placeholder="姓名"></el-input><br />
    <el-input v-model="user.gender" placeholder="性别"></el-input><br />
    <el-input v-model="user.age" placeholder="年龄"></el-input><br />
    <el-button @click="handleClick">导出word</el-button>
    <div class="des_box">
      <el-descriptions title="User Info" border>
        <el-descriptions-item label="Username">kooriookami</el-descriptions-item>
        <el-descriptions-item label="Telephone">18100000000</el-descriptions-item>
        <el-descriptions-item label="Place">Suzhou</el-descriptions-item>
        <el-descriptions-item label="Remarks">
          <el-tag size="small">School</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="Address">No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province</el-descriptions-item>
      </el-descriptions>
    </div>
    <el-button @click="handleExport">导出Html转word</el-button>
  </div>
</template>

<script setup lang="ts">
import { reactive } from 'vue'
import JSZipUtils from 'jszip-utils'
import JSZip from 'pizzip'
import Docxtemplater from 'docxtemplater'
import { saveAs } from 'file-saver'
import { asBlob } from 'html-docx-js-typescript'
const user = reactive({
    name: '小明',
    gender: '男',
    age: 18
})
const handleClick = () => {
    JSZipUtils.getBinaryContent('/public/word.docx', function (error: unknown, content: JSZip.LoadData) {
    // 抛出异常
        if (error) {
            throw error
        }
        // 创建一个JSZip实例，内容为模板的内容
        let zip = new JSZip(content)
        // 创建并加载docxtemplater实例对象
        let doc = new Docxtemplater().loadZip(zip)
        // 设置模板变量的值
        doc.setData({
            name: user.name,
            age: user.age,
            gender: user.gender
        })
        try {
            // 用模板变量的值替换所有模板变量
            doc.render()
        } catch (error) {
            // 抛出异常
            throw error
        }
        // 生成一个代表docxtemplater对象的zip文件（不是一个真实的文件，而是在内存中的表示）
        let out = doc.getZip().generate({
            type: 'blob',
            mimeType: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'
        })
        // 将目标文件对象保存为目标类型的文件，并命名
        saveAs(out, '测试.docx')
    })
}
const handleExport = () => {
    const html = document.querySelector('.des_box')?.innerHTML
    const style = `
        table {
            border-collapse: collapse;
        }
        table th {
            border: 1px solid black;
        }
    `
    const htmlString = `<!DOCTYPE html>
            <html lang="en">
            <head>
            <meta charset="UTF-8">
            <style>
               ${style}
            </style>
            ${html}
            </head>
            <body>
            <h1 class="title">Welcome</h1>
            <div class="title">样式测试</div>
            </body>
            </html>
            
            `
    console.log(htmlString)
    asBlob(htmlString).then(data => {
        saveAs(data, 'file.docx') // save as docx file
    })
}
</script>

<style lang="less" scoped>
.word {
  // border-collapse: collapse;
}
</style>
